<template>
    <div>
        <button @click="btnClick">{{btn}}</button>
        <home-child :children="value" @changeChild="changeChild">
            <template v-slot:content="scoped">
                我是插槽{{scoped.data}}
            </template>
        </home-child>

    </div>
</template>

<script>
    import {ref,reactive,toRefs} from 'vue'
    import homeChild from "./homeChild";
    export default {
        components:{
             homeChild
        },
        setup(){
            const btn = ref('123');
            const btnClick = ()=>{
                btn.value = "456";
            }

            const btnRf = reactive({
                one:"123",
                value:"46"
            })
            const changeChild = ()=>{
                btnRf.value = "changeChildtoChange"
            }
            return {
                btn,
                ...toRefs(btnRf),
                btnClick,
                changeChild
            }
        }
    }
</script>

<style scoped lang="less">

</style>